<template>
  <div class="error-wrap">
    <img class="pic-404" src="../../assets/images/v1.0.0/404.png" alt="404">
    <div class="tip">{{message}}</div>
    <div class="act">
      <span @click="reload">刷新重试</span>
      <a href="/">返回首页</a>
    </div>
  </div>
</template>
<script>
  export default {
    computed: {
      message() {
        return '页面不存在哦......'
      }
    },
    methods: {
      reload() {
        location.reload();
      }
    },
  }
</script>
<style lang="scss" scoped>
  .error-wrap {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f0f2f5;
    text-align: center;
    .pic-404 {
      display: inline-block;
      margin-top: 25vh;
      margin-left: 50px;
      width: 250px;
    }
  }

  .tip {
    font-size: 1rem;
    margin-top: 20px;
  }

  .act {
    margin-top: 20px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    > span {
      margin-left: 30px;
    }
  }

</style>
